<script setup>
const router = useRouter();
const route = useRoute();
import userPinia from "~/pinia/user";
const userStore = userPinia();
const token = useCookie("myToken");
const open = ref(false);
const login = () => {
  const myToken = useCookie("myToken");
  myToken.value = "nuxt-token";
};
const menuitems = [
  {
    title: "首页",
    path: "/",
  },
  {
    title: "游戏库",
    path: "/product",
  },
  {
    title: "下载中心",
    path: "/download",
  },
];
const goMenu = (path) => {
  router.push(path);
  open.value = false;
};
const showLogin = () => {
  userStore.setLoginDialog(true);
};
const outLogin = () => {
  token.value = "";
  navigateTo("/");
};
</script>
<template>
  <div
    :class="[
      'w-screen h-[64px] shadow-sm fixed z-[99] top-0 left-0 bg-[#141623] border-b border-[#222]',
      {
        'bg-opacity-30': route.path !== '/product',
      },
    ]"
  >
    <div
      class="md:max-w-screen-xl h-[64px] px-[10px] lg:mx-auto flex items-center relative"
    >
      <img
        width="155"
        src="https://start.gtimg.com/web/www/webgame/assets/img/911195daa338ca1b3a68.png"
        alt=""
      />
      <div
        class="size-[40px] flex justify-end items-center mr-[20px] grow lg:hidden"
      >
        <UIcon @click="open = !open" name="i-heroicons-light-bulb" />
      </div>
      <div
        class="lg:grow lg:w-auto lg:flex"
        :class="{ block: open, hidden: !open }"
      >
        <ul
          class="w-[100%] lg:space-x-[50px] lg:ml-[80px] z-[99] bg-[#141623] lg:bg-[#141623] lg:bg-opacity-0 lg:flex flex-col lg:flex-row absolute left-0 top-[64px] lg:top-0 lg:relative text-[#f5f5f5]"
        >
          <li
            class="h-[64px] leading-[64px] cursor-pointer hover:text-[#999] pl-[10px] lg:pl-[0px] font-bold"
            :class="{
              ' border-b-[2px] border-[#00c2ff] text-[#00c2ff] border-solid':
                route.path == item.path,
            }"
            v-for="item in menuitems"
            :key="item.path"
            @click="goMenu(item.path)"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>
      <div>
        <img
          v-if="!token"
          @click="showLogin"
          class="cursor-pointer"
          width="35"
          src="https://start.gtimg.com/web/www/webgame/assets/img/2ce44c7896625da8175f.png"
          alt=""
        />
        <UPopover
          v-else
          mode="hover"
          :ui="{
            background: 'bg-[#141623]',
            border: 'border-[#141623]',
            width: 'w-[300px]',
          }"
        >
          <span>已登录</span>
          <template #panel>
            <div class="p-4 text-center cursor-pointer" @click="outLogin">
              退出登录
            </div>
          </template>
        </UPopover>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss"></style>
